<template>
  <f7-page class="step-body5">
    <!-- 表头 -->
    <f7-row class="f7-row">
      <f7-col class="f7-icons" width="20"
        ><f7-link
          back
          icon-material="xmark"
          icon-f7="xmark"
          color="black"
        ></f7-link
      ></f7-col>
      <f7-col class="f7-col-title">工程基本信息</f7-col>
      <f7-col class="f7-icons" width="20">ellipsis</f7-col>
    </f7-row>
    <!-- 表单输入框 -->
    <f7-block class="f7-block">
      <qm-field
        label="客户姓名"
        required
        readonly
        v-model="list.name"
        placeholder="请输入"
        input-align="right"
      >
      </qm-field>
      <qm-field
        label="手机号码"
        v-model="list.phone"
        required
        readonly
        placeholder="请输入"
        input-align="right"
        maxlength="13"
      >
      </qm-field>
      <qm-field label="性别" required readonly input-align="right" class="gender">
        <template #input>
          <!-- 男女性别选择 -->
          <f7-list class="qm-list">
            <f7-list-item
              class="qm-list-item"
              radio
              radio-icon="start"
              title="男"
              name="demo-radio-start"
              checked
            ></f7-list-item>
            <f7-list-item
              class="qm-list-item"
              radio
              radio-icon="start"
              title="女"
              name="demo-radio-start"
            ></f7-list-item>
          </f7-list>
        </template>
      </qm-field>
    </f7-block>
    <f7-row class="f7-card"></f7-row>
    <!-- 日期选择 -->
    <f7-block class="f7-block">
      <qm-field
        label="日期选择"
        v-model="list.time"
        required
        readonly
        placeholder="请选择"
        input-align="right"
        :is-link="true"
      >
      </qm-field>
      <qm-field
        label="客户标签"
        placeholder="请选择"
        :model="list.label"
        readonly
        input-align="right"
        :is-link="true"
      >
      <template #input>
        <f7-chip
          :text="item"
          v-for="(item, index) in model"
          :key="index"
          class="qm-chip"
        ></f7-chip>
      </template>
      </qm-field>
      <qm-field
        label="备注信息"
        v-model="list.remarks"
        type="textarea"
        autosize
        placeholder="请输入"
        :border="false"
        readonly
        input-align='right'
      >
      </qm-field>
    </f7-block>
    <f7-row class="f7-card"></f7-row>
    <!-- 上传证明 -->
    <f7-block class="f7-block">
      <qm-upload-picture
        :params="{ dataKey: 'test', type: 'test' ,businessType:'test'}"
        class="qm-choose-image"
      ></qm-upload-picture>
    </f7-block>
    <f7-row class="f7-card"></f7-row>
    <!-- 上传文件 -->
    <f7-block class="f7-block">
      <qm-upload
        :params="{ dataKey: 'test', type: 'test' }"
        title="上传文件"
        uploadId="files1"
      ></qm-upload>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      list: {
        name: "孙立行",
        phone: "182 4444 4444",
        gender: 1,
        time: "2022-04-06",
        remarks: "用户记录公司团建活动的开支，请每位成员记录时上传票据",
      },
      model:['三个字','两字']
    };
  },

};
</script>

<style lang="less" scoped>
/deep/ .van-cell__value {
  color: #0f1826;
  font-size: calc(30px * var(--ratio));
}
.step-body5 {
  background-color: var(--color-fill-grey-inverse);

  .f7-row {
    margin: 0;
    padding: 0;
    margin-top: calc(27px * var(--ratio));
    margin-bottom: calc(48px * var(--ratio));

    .f7-col-title {
      font-size: calc(32px * var(--ratio));
      text-align: center;
      color: #000000;
      font-weight: 400;
    }

    .f7-icons {
      font-size: calc(40px * var(--ratio));
      .f7-link{
        height: auto;
      }
      .f7-link::before{
        display: none;
      }
    }
  }

  .f7-block {
    margin: 0;
    padding: 0;
    padding-bottom: calc(31px * var(--ratio));
    margin-left: calc(32px * var(--ratio));
    margin-right: calc(16px * var(--ratio));
    .gender{
      .qm-list {
        margin: 0px;
        --f7-list-item-media-margin: 0px;
        --f7-radio-extra-margin: 3px;
        --f7-list-item-padding-horizontal: 10px;
        --f7-safe-area-right: 0px;
        --f7-list-item-min-height: 0px;
        --f7-list-item-padding-vertical: 0px;
      /deep/ ul {
          display: flex;
        }
        .item-inner{
          padding-right: 0px;
        }
        .icon-radio{
          margin-left: 16px;
        }
      }
    }
    .qm-chip{
      margin: 0px;
      margin-right: 9px;
      --f7-chip-height:24px;
    }
  }

  .f7-card {
    margin: 0;
    padding: 0;
    width: 100%;
    height: calc(23px * var(--ratio));
    background-color: #F5F7FA;
    --f7-card-border-radius: 0px;
    box-shadow: none;
  }

}

</style>
